<template>
  <div>
    <!-- 表格 -->
    <el-table
      style="margin-top: 15px"
      :header-cell-style="() => 'background-color:rgb(250,250,250);border-bottom:3px solid rgb(232,232,232)'"
      :data="items"
    >
      <el-table-column
        width="150"
        label="试题编号"
        prop="number"
        align="center"
      ></el-table-column>
      <el-table-column
        width="100"
        label="学科"
        prop="subject"
        align="center"
      ></el-table-column>
      <el-table-column
        width="160"
        label="目录"
        prop="catalog"
        align="center"
      ></el-table-column>
      <el-table-column width="160" label="题型" align="center">
        <template #default="{ row }">
          <span v-if="row.questionType === '1'">单选</span>
          <span v-else>多选</span>
        </template>
      </el-table-column>
      <el-table-column
        width="200"
        label="题干"
        prop="question"
        align="center"
      ></el-table-column>
      <el-table-column
        width="300"
        label="录入时间"
        align="center"
        prop="addDate"
      ></el-table-column>
      <el-table-column width="80" label="难度" align="center">
        <template #default="{ row }">
          <span v-if="row.difficulty === '1'">简单</span>
          <span v-else-if="row.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="录入人"
        prop="creator"
        align="center"
      ></el-table-column>
      <el-table-column width="100" label="审核状态" align="center">
        <template #default="{ row }">
          <span v-if="row.chkState === 0">待审核</span>
          <span v-else-if="row.chkState === 1">已审核</span>
          <span v-else>已拒绝</span>
        </template>
      </el-table-column>
      <el-table-column
        width="100"
        label="审核意见"
        prop="chkRemarks"
        align="center"
      ></el-table-column>
      <el-table-column
        width="100"
        label="审核人"
        prop="chkUser"
        align="center"
      ></el-table-column>
      <el-table-column width="100" label="发布状态" align="center">
        <template #default="{ row }">
          <span v-if="row.publishState === 0">已下架</span>
          <span v-else-if="row.publishState === 1">已上架</span>
          <span v-else>待发布</span>
        </template>
      </el-table-column>
      <el-table-column width="250" label="操作" fixed="right" align="center">
        <template #default="{ row }">
          <el-button
          size="small"
          type="text"
          @click="previewClick(row.id)"
          >预览</el-button>
          <el-button
          size="small"
          :disabled="row.chkState !== 0 "
          type="text"
          @click="auditFn(row.id)"
            >审核</el-button
          >
          <el-button size="small"
          :disabled="row.publishState === 1"
          type="text"
          @click="editFn(row.id)"
            >修改</el-button
          >
          <el-button size="small"
          v-if="row.publishState === 1"
          type="text"
          @click="choiceFn(row.id,0,row.chkState)"
            >下架</el-button
          >
          <el-button size="small"
          v-else type="text"
           @click="choiceFn(row.id,1,row.chkState)"
          >上架</el-button>
          <el-button size="small"
          :disabled="row.publishState === 1"
          type="text"
          @click="delFn(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-row type="flex" justify="end" align="middle" style="height:70px">
      <el-pagination
      background
      layout="prev, pager, next ,sizes, jumper"
      :page-size="value.pagesize"
      :current-page.sync="value.page"
      :total="value.counts"
      @size-change="sizeChange"
      @current-change="changeFn"
      :page-sizes="[5, 10, 20, 50]"
      ></el-pagination>
    </el-row>
    <!-- 审核弹层 -->
    <el-dialog
    @close="close"
    width="25%"
    :visible.sync="dialogVisible"
    title="题目审核"
    >
     <el-form :model="review">
      <el-form-item>
        <el-radio v-model="review.chkState" :label="1">通过</el-radio>
        <el-radio v-model="review.chkState" :label="2">拒绝</el-radio>
      </el-form-item>
      <el-form-item>
        <el-input
        type="textarea"
        size="mini"
        v-model="review.chkRemarks"
        placeholder="请输入审核意见"
        ></el-input>
      </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
            <el-row type="flex" justify="end">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="submitForReview">确定</el-button>
          </el-row>
          </span>
    </el-dialog>
    <!-- 预览弹层 -->
    <questions-preview
    :dialogVisible.sync="preview"
    :id.sync="previewId"
    ref="preview"
    ></questions-preview>
  </div>
</template>

<script>
import { remove, choicePublish, choiceCheck } from '../../../api/hmmm/questions'
import questionsPreview from '../../components/questions-preview.vue'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      // 预览弹层的显示隐藏
      preview: false,
      // 预览id
      previewId: null,
      // 审核弹层的显示隐藏
      dialogVisible: false,
      // 关于审核的数据
      review: {
        // 控制单选框的选择
        chkState: 1,
        // 文本框的输入
        chkRemarks: null,
        // 当前选中的这个id
        id: null
      }
    }
  },
  props: {
    items: {
      type: Array,
      default: null
    },
    value: {
      type: Object,
      default: null
    }
  },
  methods: {
    // 修改按钮
    editFn (id) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id
        }
      })
    },
    // 预览
    previewClick (id) {
      this.preview = true
      this.previewId = id
      // 等待弹层显示
      this.$nextTick(() => {
        this.$refs.preview.getDetail()
      })
    },
    // 提交审核
    async submitForReview () {
      if (this.review.chkRemarks) {
        await choiceCheck(this.review)
        this.$message.success('审核成功')
        // 关闭弹层和清空表单
        return this.close()
      }
      this.$message.warning('意见不能为空')
    },
    // 关闭弹层  和   清空表单
    close () {
      // 提醒父级更新数据
      this.$emit('change')
      this.dialogVisible = false
      // 这里来个手动清空表单   因为没有加校验所以不能用el-form的重置表单
      this.review = {
        // 控制单选框的选择
        chkState: 1,
        // 文本框的输入
        chkRemarks: null,
        // 当前选中的这个id
        id: null
      }
    },
    // 点击审核的按钮触发
    auditFn (id) {
      // 传ID
      this.review.id = id
      // 控制弹层的显示
      this.dialogVisible = true
    },
    // 上下架的功能
    async choiceFn (id, publishState, chkState) {
      this.$confirm(`您确认${publishState === 1 ? '上架' : '下架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (chkState === 1 || chkState !== 0) {
          await choicePublish({
            id,
            publishState
          })
          this.$message.success(publishState === 1 ? '上架成功' : '下架成功')
          // 告诉父组件更新数据
          return this.$emit('change')
        }
        this.$message.warning('未审核的不能操作')
      }).catch(() => 1)
    },
    // 删除功能
    async delFn (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 确定删除
        await remove({ id })
        this.$message.success('删除成功!')
        // 告诉父组件更新数据同时判断是不是当前页的最后一个  如果是就页码-1
        this.$emit('change',
          this.items.length === 1 && this.value.page > 1
            ? { ...this.value, page: this.value.page - 1 }
            : this.changeFn())
        // 这里的()=>1 是为了防止后台报错用的 无功能
      }).catch(() => 1)
    },
    // 当前页码发生改变
    changeFn (val) {
      this.$emit('change', { ...this.value, page: val })
    },
    // 一页的显示数量发生改变
    sizeChange (val) {
      this.$emit('change', val)
    }
  }
}
</script>

<style>
/* asf:{
  : ;
} */
</style>
